<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center qd_flex_0_ibhf" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub qd_fd0_0_ibhf'>
                    <view class='flex flex-wrap align-center qd_fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  qd_fd0_0_c0_c0_ibhf'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='qd_fd0_0_c1_c0_ibhf'>抢答</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end qd_fd0_0_c0_ibhf'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction flex-wrap align-center justify-center benben-flex-layout">
                <image @tap.stop="tjqa()" class='qd_fd1_0_ibhf' mode="aspectFit" :src='STATIC_URL+"stcimg/10.png"'></image>
                <view class='flex flex-wrap align-center self-center justify-center qd_fd1_1_ibhf'  v-if='last_time'>
                    <image class='qd_fd1_1_c0_ibhf' mode="aspectFit" src="/static/exam/time.png"></image>
                    <text class='qd_fd1_1_c1_ibhf' >{{timeDisplay }}</text>
                </view>
                <view class='flex flex-wrap align-center' v-if="last_num">
                    <text class='qd_fd1_2_c0_ibhf'>还剩{{last_num}}个名额快去抢~</text>
                </view>
            </view>

            <!---flex布局flex布局结束-->


        </view>
    </page-body>
</template>
<script>
    export default {
        components: {},


        data() {
            return {
				timer:'',
				id:'',
				remainingSeconds:60,
				"lessonplanning_id": "",
				"teaching_id": "",
				exampaper_id:'',
				last_num:'',//抢答剩余名额
				last_time:'',//抢答剩余时间  秒
				quick_id:'',//抢答id
				quick_time:'',//抢答发起的时间
				msgid:'',//系统公告跳转的
				aid:'',//抢答信息id
				time:'',//开始时间
				time1:'',//结束时间
			};
        },
        computed: {
			timeDisplay() {
				const h = String(Math.floor(this.remainingSeconds / 3600)).padStart(2, '0');
				const m = String(Math.floor((this.remainingSeconds % 3600) / 60)).padStart(2, '0');
				const s = String(this.remainingSeconds % 60).padStart(2, '0');
				return `${h}:${m}:${s}`;
			}
        },
        watch: {},
        onLoad(options) {
			// 人数名额选填 但默认最少3
			// 抢答  限制时间 选填
			this.lessonplanning_id=options.id1
			this.teaching_id=options.id2
			this.msgid=options.msgid
			this.aid=options.aid
			console.log(this.aid)
			this.time=options.time
			this.time1=options.time1
			
			this.getlp690e155cdbd2Func()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			// 公告 已读
			async getinfo(){
				let datalist = await this.$api.get(global.apiUrls.post68413be3159e9, {
					aid: this.msgid,
					
				});
							
				// if (datalist.data.code != 1) {
				// 	this.$message.info(datalist.data.msg);
				// 	return
				// }
			},
			startCountdown() {
				// this.remainingSeconds = this.examTime * 60;
			
				if (this.timer) clearInterval(this.timer);
			
				this.timer = setInterval(() => {
					if (this.remainingSeconds > 0) {
						this.remainingSeconds--;
					} else {
						clearInterval(this.timer);
						// this.open=true
						uni.redirectTo({
							url:`/pages/suitc/qdjg/qdjg?id=${this.quick_id}&type=1&time=${this.time}&time1=${this.time1}`
						})
						//考试时间到，强制交卷
						// this.tjda(2)
					}
				}, 1000);
			},
			
			async getlp690e155cdbd2Func() {
				//请求方法
				//数据验证
			console.log(this.aid)
				let datalist = await this.$api.post(global.apiUrls.post68d25d772be0a, {
					activitieslog_id:this.aid
				});
			
				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data;
				
				// 抢答
				if (datalist.data.data.quick_status == 1) {
					this.exampaper_id = datalist.data.data.exampaper_id
					this.last_num=datalist.data.data.last_num
					this.last_time=datalist.data.data.last_time
					this.quick_id=datalist.data.data.quick_id
					this.quick_time=datalist.data.data.quick_time
					this.remainingSeconds=this.last_time
					console.log(this.exampaper_id)
					console.log(this.last_time)
					if(this.last_time){
						this.startCountdown()
					}
				}else{
					uni.redirectTo({
						url: "/pages/suitc/qdjg/qdjg?type=2&status=2&aid="+this.aid+'&time='+this.time+'&time1='+this.time1
					})
				}
				
				
				
			},
			async tjqa(){
				
				let newtime= new Date().getTime() / 1000
				let time= newtime - this.quick_time
				time=time.toFixed(2)
				console.log(time)
				// return
				let datalist = await this.$api.post(global.apiUrls.post68bff7662ab8d, {
					activitieslog_id: this.aid,
					use_time:time
				});
						// if(this.msgid){
						// 	this.getinfo()
						// }	
				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data;
				console.log(infolist)
				uni.redirectTo({
					url:`/pages/suitc/qdjg/qdjg?aid=${this.aid}&type=1&time=${this.time}&time1=${this.time1}`
				})
			},
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;

        .qd_fd1_0_ibhf {
            width: 374rpx;
            height: 374rpx;
            border-radius: 0rpx;
            margin: 200rpx 0rpx 72rpx 0rpx;
			position: relative;
			-webkit-animation: twinkling 1.5s infinite ease-in-out;
			animation: twinkling 1.5s infinite ease-in-out;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			position: relative;
        }
		@keyframes twinkling {
		  0% {
			   transform: scale(0.8);
		    // opacity: 1;
		    // filter: alpha(opacity=10);
		    // -webkit-transform: scale(1);
		  }
		
		  50% {
			   transform: scale(1.2);
		    // opacity: 1;
		    // filter: alpha(opacity=50);
		    // -webkit-transform: scale(1.06);
		  }
		
		  100% {
			   transform: scale(0.8);
		    // opacity: 1;
		    // filter: alpha(opacity=100);
		    // -webkit-transform: scale(1);
		  }
		}

        .qd_fd1_1_ibhf {
            border: 1px solid #145EFD;
            background: rgba(20, 94, 253, 0.1);
            width: 238rpx;
            height: 64rpx;
            margin: 0rpx 0rpx 32rpx 0rpx;

            .qd_fd1_1_c0_ibhf {
                width: 32rpx;
                height: 32rpx;
                border-radius: 0rpx;
                margin: 0rpx 16rpx 0rpx 0rpx;
				
            }
			

            .qd_fd1_1_c1_ibhf {
                font-size: 32rpx;
                color: rgba(20, 94, 253, 1);
            }
        }

        .qd_fd1_2_c0_ibhf {
            font-size: 32rpx;
        }

        .qd_flex_0_ibhf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .qd_fd0_0_ibhf {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .qd_fd0_0_c1_c0_ibhf {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .qd_fd0_0_c0_ibhf {
            width: 120rpx;

            .qd_fd0_0_c0_c0_ibhf {
                font-size: 36rpx;
                color: #333;
            }
        }
    }
</style>